<template>
  <div class="user-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="user">
        <el-form-item label="工资类型名称">
          <el-input v-model="user.fieldName" placeholder="请输入工资类型名称" />
        </el-form-item>
        <el-form-item label="工资类型">
          <el-input v-model="user.fieldDesc" placeholder="请输入工资类型" />
        </el-form-item>
        <!-- <el-form-item label="删除状态" prop="state">
          <el-select v-model="user.state">
            <el-option :value="1" label="已删除"></el-option>
            <el-option :value="0" label="未删除"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
         <el-button type="primary" @click="handleCreate"
          >新增</el-button
        >
<!--        <el-button-->
<!--          type="danger"-->
<!--          @click="handlePatchDel"-->
<!--          v-has="'user-patch-delete'"-->
<!--          >批量删除</el-button-->
<!--        >-->
      </div>
      <el-table :data="userList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
              @click="handleEdit(scope.row)"
              size="mini">编辑</el-button>
            <el-button
                type="danger"
                size="mini"
                @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="新增" v-model="showModal">
      <el-form
        ref="dialogForm"
        :model="userForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="工资类型" prop="fieldDesc">
          <el-input
              v-model="userForm.fieldDesc"

              placeholder="请输入工资类型"
          />
        </el-form-item>
        <el-form-item label="类型名称" prop="fieldName">
          <el-input
              v-model="userForm.fieldName"
              placeholder="请输入工资类型名称"
          />
        </el-form-item>
        <el-form-item label="字段类型" prop="fieldType">
          <el-select v-model="userForm.fieldType">
            <el-option :value="DECIMAL" label="DECIMAL"></el-option>
          </el-select>
<!--          <el-input-->
<!--              v-model="userForm.fieldType"-->
<!--          />-->
        </el-form-item>
        <el-form-item label="字段长度" prop="fieldSize">
          <el-input type="number"
              v-model="userForm.fieldSize"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
import utils from "../utils/utils";
export default {
  name: "user",
  setup() {
    //   获取Composition API 上下文对象
    const { proxy } = getCurrentInstance();
    // 初始化用户表单对象
    const user = reactive({
      // state: 0,
    });
    // 初始化用户列表数据
    const userList = ref([]);
    // 初始化分页对象
    const pager = reactive({
      page: 1,
      pageSize: 10,
    });
    // 选中用户列表对象
    const checkedUserIds = ref([]);
    // 弹框显示对象
    const showModal = ref(false);
    // 新增用户Form对象
    const userForm = reactive({
      fieldType:"DECIMAL"
    });
	const id = ref(0);
    // 所有角色列表
    const roleList = ref([]);
    // 所有部门列表
    const deptList = ref([]);
    // 定义用户操作行为
    const action = ref("add");
    // 定义表单校验规则
    const rules = reactive({
      fieldName: [
        {
          required: true,
          message: "请输入工资类型名称",
          trigger: "blur",
        },
      ],
      fieldDesc: [
	    {
	      required: true,
	      message: "请输入工资类型",
	      trigger: "blur",
	    }],
      fieldType: [
        {
          required: true,
          message: "请输入字段类型",
          trigger: "blur",
        },
      ],
      fieldSize: [
        {
          required: true,
          message: "请输入字段长度",
          trigger: "blur",
        },
      ]
    });
    // 定义动态表格-格式
    const columns = reactive([
      {
        label: "工资类型名称",
        prop: "fieldName",
      },
      {
        label: "工资类型",
        prop: "fieldDesc",
      },
      {
        label: "字段类型",
        prop: "fieldType",
      },
      {
        label: "字段长度",
        prop: "fieldSize",
      },
      {
        label: "创建时间",
        prop: "createTime",
        width: 180,
      }
    ]);
    // 初始化接口调用
    onMounted(() => {
      getUserList();
      // getDeptList();
      // getRoleAllList();
    });
    // 获取用户列表
    const getUserList = async () => {
      let params1 = {
		  page:1,
		  pageSize:10
	  };
	  let params = { ...user, ...pager };
      try {
        const list = await proxy.$api.getExpression(params);//getUserList
        userList.value = list.rows;
        pager.total = list.records;
      } catch (error) {}
    };
    //  查询事件，获取用户列表
    const handleQuery = () => {
      getUserList();
    };
    // 重置查询表单
    const handleReset = (form) => {
      user.fieldName = "";
      user.fieldDesc = "";
      proxy.$refs[form].resetFields();
    };
    // 分页事件处理
    const handleCurrentChange = (current) => {
      pager.page = current;
      getUserList();
    };
    // 用户单个删除
    const handleDel = async (row) => {
		let params = toRaw(row);
      await proxy.$api.salaryFileldDel(params);
      proxy.$message.success("删除成功");
      getUserList();
    };
    // 批量删除
    const handlePatchDel = async () => {
      if (checkedUserIds.value.length == 0) {
        proxy.$message.error("请选择要删除的用户");
        return;
      }
      const res = await proxy.$api.userDel({
        userIds: checkedUserIds.value, //可单个删除，也可批量删除
      });
      if (res.nModified > 0) {
        proxy.$message.success("删除成功");
        getUserList();
      } else {
        proxy.$message.success("修改失败");
      }
    };

    // 表格多选
    const handleSelectionChange = (list) => {
      let arr = [];
      list.map((item) => {
        arr.push(item.userId);
      });
      checkedUserIds.value = arr;
    };
    // 用户新增
    const handleCreate = () => {
      action.value = "add";
      showModal.value = true;
    };

    // const getDeptList = async () => {
    //   let list = await proxy.$api.getDeptList();
    //   deptList.value = list;
    // };

    // 角色列表查询
    // const getRoleAllList = async () => {
    //   let list = await proxy.$api.getRoleAllList();
    //   roleList.value = list;
    // };
    // 用户弹窗关闭
    const handleClose = () => {
      showModal.value = false;
      handleReset("dialogForm");
    };
    // 用户提交
    const handleSubmit = () => {
      if(userForm.fieldName == null){
        proxy.$message.error("<类型名称>不能为空 ！！！");
        return;
      }
      if(!userForm.fieldName.replace(/[^a-zA-Z]/g,'')){
        proxy.$message.error("<类型名称>只能输入《英文》 ！！！");
        return;
      }
      if(userForm.fieldSize > 9){
        proxy.$message.error("字符长度不能大于9 ！！！");
        return;
      }
      proxy.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          debugger
          let params = toRaw(userForm);
          let res = await proxy.$api.userSubmit(params);
		  if(res == -5){
			  proxy.$message.error("字段名或工资类型名重复");
			  return;
		  }
          showModal.value = false;
          proxy.$message.success("增加成功");
          handleReset("dialogForm");
          getUserList();
        }
      });
    };
    // 用户编辑
    const handleEdit = (row) => {
      action.value = "edit";
      showModal.value = true;
      proxy.$nextTick(() => {
        Object.assign(userForm, row);
      });
    };
    return {
	  id,
      user,
      userList,
      columns,
      pager,
      checkedUserIds,
      showModal,
      userForm,
      rules,
      roleList,
      deptList,
      action,
      getUserList,
      handleQuery,
      handleReset,
      handleCurrentChange,
      handleDel,
      handlePatchDel,
      handleSelectionChange,
      handleCreate,
      // getRoleAllList,
      // getDeptList,
      handleClose,
      handleSubmit,
      handleEdit,
    };
  },
};
</script>

<style lang="scss">
</style>
